<!-- 页面 -->
<template>
<div>
    <h1>声明周期</h1>
    {{ num }}
    <button @click="num++">++</button>
</div>
</template>
<!--vue -->
<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
    setup(){
        let num = ref(0)
        onBeforeMount(()=>{
            console.log('挂在前');
        })
        onMounted(()=>{
            console.log('挂载后');
        })
        onBeforeUpdate(()=>{
            console.log('修改前');
        })
        onUpdated(()=>{
            console.log('修改之后');
        })
        onBeforeUnmount(()=>{
            console.log('销毁前');
        })
        onUnmounted(()=>{
            console.log('销毁之后');
        })
        return{
            num
        }
    }

}
</script>
<!-- css样式 -->
<style>
</style>